<template>
	<view class="content-box">
		<u-notify ref="uNotify"></u-notify>
		<view style="width: 100%;">
			<u-search 
				placeholder="请输入目录名" 
				v-model="keyword" 
				shape="square" 
				:showAction="true"
				:animation="true"
				@search="search">
			</u-search>
		</view>
		<u-loading-page :loading="isLoading"></u-loading-page>
		<view class="directory-menu-box">
			<view class="content-box-center pitem-row-box" v-for="(pitem, pindex) in data" :key="pindex">
				<view class="content-box-row-between-all" @click="getCitemsData(pindex)" style="height: 50px;">
					<view class="content-box-row-start pitem-name-row-box">
						<u--image
							src="/static/icon/project1.png"
							shape="square" 
							width="24"
							height="24"
							radius="5px">
						</u--image>
						<text style="margin-left: 6px;">{{ pitem.name }}</text>
					</view>
					<u-icon v-if="pitem.isEdit" name="arrow-down" size="16"></u-icon>
					<u-icon v-else name="arrow-right" size="16"></u-icon>
				</view>
				<view 
					@click="onClickCitem(citem)"
					v-show="pitem.isEdit" 
					class="content-box-row-between-all citem-row-box" 
					v-for="(citem, cindex) in pitem.citems"
					:key="cindex">
					<view class="content-box-row-start citem-name-row-box">
						<u--image
							src="/static/icon/file-word.png"
							style="margin-right: 6px;"
							shape="square" 
							width="24"
							height="24"
							radius="5px">
						</u--image>
						<text v-if="type !== 'config'">
							{{ citem.name }}
						</text>
						<text v-else>
							{{ citem.key }}
						</text>
					</view>
					<view class="">
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: "",
				projectId: "",
				token: "",
				data: [],
				keyword: "",
				isLoading: false,
				cData: []
			}
		},
		onLoad(){
		},
		onShow() {
			this.getPageOptions()
		},
		methods: {
			getPageOptions() {
				const pages = getCurrentPages()
				const currentPage = pages[pages.length - 1]
				const options = currentPage.options
				this.type = options.type
				this.projectId = options.id
				uni.getStorage({
					key: "token",
					success: (token) => {
						this.token = token.data
						this.getItemsData()
					},
					fail() {
						uni.clearStorage()
						uni.redirectTo({
							url: "/pages/index/index"
						})
					}
				})
			},
			getItemsData(keyword) {
				this.isLoading = true
				uni.request({
					url: "/api/directory/" + this.projectId + "/" + this.type,
					method: "GET",
					header: {
						Authorization: this.token,
					},
					success: (res) => {
						if(res.data.code === 200) {
							let tmps = []
							if(keyword) {
								tmps = res.data.data.filter((item) => {
									return item.name.indexOf(keyword) > -1
								})
							}else {
								tmps = res.data.data
							}
							for (var i = 0; i < tmps.length; i++) {
								tmps[i].citems = []
							}
							this.data = tmps
						} else {
							this.$refs.uNotify.show({
								top: 10,
								type: 'error',
								color: '#ff0000',
								bgColor: '#2f3233',
								message: res.data.msg,
								duration: 1000 * 3,
								fontSize: 14,
								safeAreaInsetTop: false
							})
						}
						this.isLoading = false
					},
					fail: () => {
						this.$refs.uNotify.show({
							top: 10,
							type: 'error',
							color: '#ff0000',
							bgColor: '#2f3233',
							message: '服务器出错',
							duration: 1000 * 3,
							fontSize: 14,
							safeAreaInsetTop: false
						})
						this.isLoading = false
					}
				})
			},
			search(value) {
				this.getItemsData(value)
			},
			onClickCitem(item) {
				switch (this.type){
					case "func":
						uni.navigateTo({
							url: "/pages/project/func/func?id=" + item.id,
						})
						break;
					case "api":
						uni.navigateTo({
							url: "/pages/project/apis/apis?id=" + item.id,
						})
						break;
					case "aop":
						uni.navigateTo({
							url: "/pages/project/aop/aop?id=" + item.id,
						})
						break;
					case "policy":
						uni.navigateTo({
							url: "/pages/project/policy/policy?id=" + item.id,
						})
						break;
					case "source":
						uni.navigateTo({
							url: "/pages/project/source/source?id=" + item.id,
						})
						break;
					case "config":
						uni.navigateTo({
							url: "/pages/project/config/config?id=" + item.id,
						})
						break;
					case "component":
						uni.navigateTo({
							url: "/pages/project/component/component?id=" + item.id,
						})
						break;
					case "flow":
						uni.navigateTo({
							url: "/pages/project/flow/flow?id=" + item.id,
						})
						break;
					case "response":
						uni.navigateTo({
							url: "/pages/project/response/response?id=" + item.id,
						})
						break;
					case "scheduler":
						uni.navigateTo({
							url: "/pages/project/scheduler/scheduler?id=" + item.id,
						})
						break;
					default:
						break;
				}
			},
			getCitemsData(index) {
				if(this.data[index].isEdit === true) {
					this.data[index].isEdit = false
					return
				}
				let url = ""
				switch (this.type){
					case "api":
						url = "/api/clients/" + this.data[index].id
						break;
					case "func":
						url = "/api/functions/" + this.data[index].id
						break;
					default:
						url = "/api/" + this.type + "s/" + this.data[index].id
						break;
				}
				uni.request({
					url: url,
					method: "GET",
					header: {
						Authorization: this.token,
					},
					success: (res) => {
						if(res.data.code === 200){
							this.data[index].citems = res.data.data
							this.data[index].isEdit = true
						} else {
							this.$refs.uNotify.show({
								top: 10,
								type: 'error',
								color: '#ff0000',
								bgColor: '#2f3233',
								message: res.data.msg,
								duration: 1000 * 3,
								fontSize: 14,
								safeAreaInsetTop: false
							})
						}
					},
					fail() {
						this.$refs.uNotify.show({
							top: 10,
							type: 'error',
							color: '#ff0000',
							bgColor: '#2f3233',
							message: '服务器出错',
							duration: 1000 * 3,
							fontSize: 14,
							safeAreaInsetTop: false
						})
					}
				})
			}
		}
	}
</script>

<style>
	.directory-menu-box {
		width: 100%;
		margin-top: 8px;
	}
	
	.pitem-row-box {
		/* background-color: aliceblue; */
		margin-bottom: 10px;
		margin-top: 0px;
		border-bottom: 1px solid rgb(214, 215, 217);
	}
	
	.pitem-name-row-box {
		font-size: 16px;
	}
	
	.citem-row-box {
		transition: all 2s;
		padding-top: 10px;
		padding-bottom: 10px;
		background-color: white;
		border-bottom: 1px solid rgb(214, 215, 217);
	}
	
	.citem-name-row-box {
		font-size: 16px;
		position: relative;
		left: 20px;
	}
</style>
